<template>
	<div class="header">
	<ul id="v-for-nav" class="nav">
    <li v-on:click="updateClass" id="0">
      <span  v-bind:class="{active:isAcitve===0}">全部地区</span>
    </li>
		<li v-for="(item,index) in navList" :key="item.id" v-on:click="updateClass" >
      
			<span v-bind:class="{active:isAcitve===index+1}" :id="index+1">{{item.district}}</span>
		</li>
	</ul>
   </div>
</template>

<script>
import * as util from '@/util/util'

export default {
  props: ['city'],
  data () {
    return {
      navList: [],
      isAcitve: 0
    }
  },
  methods: {
    updateClass (e) {
      this.isAcitve = +e.target.id
      // console.log(this.isAcitve, +e.target.id)
      this.$emit('districting', this.isAcitve)
    },
    async getDistrictByCity () {
      this.navList = await util.requestApi('/thai/api/v1/get_district_by_city', 'get', `?city_index=${this.$props.city}`)

      // console.log(this.isAcitve)
    }
  },
  created () {
    this.getDistrictByCity()
  }
}
</script>

<style scoped>
.active{
  color:#d8810f;
}
.header{
  height: 30px;
  border-bottom: solid 1px #ddd;
}
.nav{
  float: left;
  height:30px;
  margin:0;
}

li {
  line-height: 30px;
  display: inline-block;
  float: left;
  margin-left:10px;
}

span {
  color: #777;
  text-decoration: none;
}
</style>
